import React, { Component } from 'react'
import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'

import {OrderTabList} from './OrderTabList'
import {api_get_order} from '../../../utils/api.jsx'
import "taro-ui/dist/style/components/tabs.scss";

export default class MyOrder extends Component {

  constructor(){
    super(...arguments);
    this.state = {
      has_pay_0_data:'',
      has_pay_1_data:'',
      has_pay_2_data:'',
      has_pay_3_data:'',
      loadFlag_0:false,
      loadFlag_1:false,
      loadFlag_2:false,
      loadFlag_3:false,
    }
  }

  componentWillMount(){
    Taro.showLoading({
      title: '加载中',
    })
  }

  handleClick (value) {
    this.setState({
      current: value
    })
  }

  // 发送数据并请求结果
  request = () => {
    const user=Taro.getStorageSync('userInfo') 

    // 待支付的订单
    const has_pay_0 = {
      url: api_get_order,
      data: {
        phone:user.userPhone,
        has_pay:0
      },
      method: 'POST',
      header: {
        'content-type': 'application/x-www-form-urlencoded' // 默认值
      },
      success: (res) => {
        this.setState({has_pay_0_data:res.data,loadFlag_0:true})
    },
      fail: (res) => {console.log(res.data)}
    }

    // 待就诊的订单
    const has_pay_1 = {
      url: api_get_order,
      data: {
        phone:user.userPhone,
        has_pay:1
      },
      method: 'POST',
      header: {
        'content-type': 'application/x-www-form-urlencoded' // 默认值
      },
      success: (res) => {
        this.setState({has_pay_1_data:res.data,loadFlag_1:true})
    },
      fail: (res) => {console.log(res.data)}
    }

    // 已完成的订单
    const has_pay_2 = {
      url: api_get_order,
      data: {
        phone:user.userPhone,
        has_pay:2
      },
      method: 'POST',
      header: {
        'content-type': 'application/x-www-form-urlencoded' // 默认值
      },
      success: (res) => {        
        this.setState({has_pay_2_data:res.data,loadFlag_2:true})        
    },
      fail: (res) => {console.log(res.data)}
    }

    // 已取消的订单
    const has_pay_3 = {
      url: api_get_order,
      data: {
        phone:user.userPhone,
        has_pay:3
      },
      method: 'POST',
      header: {
        'content-type': 'application/x-www-form-urlencoded' // 默认值
      },
      success: (res) => {        
        this.setState({has_pay_3_data:res.data,loadFlag_3:true})        
    },
      fail: (res) => {console.log(res.data)}
    }

    Taro.request(has_pay_0)
    Taro.request(has_pay_1)
    Taro.request(has_pay_2)
    Taro.request(has_pay_3)
  }

  render () {
    
    
    if(!(this.state.loadFlag_0 && this.state.loadFlag_1 && this.state.loadFlag_2 && this.state.loadFlag_3)){
      this.request()
    }

    if(this.state.loadFlag_0 && this.state.loadFlag_1 && this.state.loadFlag_2 && this.state.loadFlag_3){
      setTimeout(function () {Taro.hideLoading()}, 200)
    }

    return (
      (this.state.loadFlag_0 && this.state.loadFlag_1 && this.state.loadFlag_2 && this.state.loadFlag_3) ?
      <view>
        <OrderTabList
          has_pay_0_data={this.state.has_pay_0_data}
          has_pay_1_data={this.state.has_pay_1_data}
          has_pay_2_data={this.state.has_pay_2_data}
          has_pay_3_data={this.state.has_pay_3_data}
        >
        </OrderTabList>
      </view>
      :<View></View>
    )
  }
}